<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        订单查询管理
        <small>银联支付订单管理页面</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">订单查询管理</a></li>
        <li class="active">银联支付订单管理页面</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="mchId">商户号</label>
                                <input type="text" class="form-control input-sm" name="mchId" id="mchId" placeholder="请输入商户号">
                            </div>
                            <div class="form-group">
                                <label for="outTradeNo">商户订单号</label>
                                <input type="text" class="form-control input-sm" name="outTradeNo" id="outTradeNo" placeholder="请输入商户订单号">
                            </div>
                            <div class="form-group">
                                <label for="transactionId">平台订单号</label>
                                <input type="text" class="form-control input-sm" name="transactionId" id="transactionId" placeholder="请输入平台订单号">
                            </div>
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn-sm" onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default btn-sm">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                    </div>
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
<!-- edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="editModalLabel">银联订单支付详情</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label class="control-label"><span class="asterisk"></span>平台订单号:</label>
                        <input  type="text" class="form-control" name="transactionId" disabled>
                        <label class="control-label"><span class="asterisk"></span>第三方订单号:</label>
                        <input  type="text" class="form-control" name="outTransactionId" disabled>
                        <label class="control-label"><span class="asterisk"></span>商户订单号:</label>
                        <input  type="text" class="form-control" name="outTradeNo" disabled>
                        <label class="control-label"><span class="asterisk"></span>商户号:</label>
                        <input  type="text" class="form-control" name="mchId" disabled>
                        <label class="control-label"><span class="asterisk"></span>终端设备号:</label>
                        <input  type="text" class="form-control" name="deviceInfo" disabled>
                        <label class="control-label"><span class="asterisk"></span>商户openid:</label>
                        <input  type="text" class="form-control" name="openid" disabled>
                        <label class="control-label"><span class="asterisk"></span>子商户openid:</label>
                        <input  type="text" class="form-control" name="subOpenid" disabled>
                        <label class="control-label"><span class="asterisk"></span>交易类型:</label>
                        <input  type="text" class="form-control" name="tradeType" disabled>
                        <label class="control-label"><span class="asterisk"></span>否关注公众账号:</label>
                        <input  type="text" class="form-control" name="isSubscribe" disabled>
                        <label class="control-label"><span class="asterisk"></span>子商户appid:</label>
                        <input  type="text" class="form-control" name="subAppid" disabled>
                        <label class="control-label"><span class="asterisk"></span>总金额(分):</label>
                        <input  type="text" class="form-control" name="totalFee" disabled>
                        <label class="control-label"><span class="asterisk"></span>现金支付金额(分)【微信】:</label>
                        <input  type="text" class="form-control" name="cashFee" disabled>
                        <label class="control-label"><span class="asterisk"></span>开票金额 【支付宝】:</label>
                        <input  type="text" class="form-control" name="invoiceAmount" disabled>
                        <label class="control-label"><span class="asterisk"></span>现金券金额(分)【微信】:</label>
                        <input  type="text" class="form-control" name="couponFee" disabled>
                        <label class="control-label"><span class="asterisk"></span>交易支付使用的资金渠道 【支付宝】:</label>
                        <input  type="text" class="form-control" name="fundBillList" disabled>
                        <label class="control-label"><span class="asterisk"></span>货币种类:</label>
                        <input  type="text" class="form-control" name="feeType" disabled>
                        <label class="control-label"><span class="asterisk"></span>附加信息:</label>
                        <input  type="text" class="form-control" name="attach" disabled>
                        <label class="control-label"><span class="asterisk"></span>银行类型:</label>
                        <input  type="text" class="form-control" name="bankType" disabled>
                        <label class="control-label"><span class="asterisk"></span>支付账户【支付宝】:</label>
                        <input  type="text" class="form-control" name="buyerLogonId" disabled>
                        <label class="control-label"><span class="asterisk"></span>银行订单号:</label>
                        <input  type="text" class="form-control" name="bankBillno" disabled>
                        <label class="control-label"><span class="asterisk"></span>支付完成时间:</label>
                        <input  type="text" class="form-control" name="timeEnd" disabled>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- delete modal -->
<div id="actionButtons" class="admin-hide">
    <a shiro:hasPermission="user:update" class="edit ml10" href="javascript:void(0)" data-toggle="tooltip" title="详情"><i class="glyphicon glyphicon-heart"></i></a>　
</div>
<!-- zTree -->
<div id="menuContent" class="menuContent"
     style="display:none;z-index:1989101600;position: absolute;border: 1px solid #ccc; background-color: #fff;">
    <ul id="tree" class="ztree"></ul>
</div>
<script th:inline="javascript">

    var $table = $('#table');

    $(function () {
        //Date range picker
        var beginTimeTake;
        $('#reservation').daterangepicker({
            "timePicker": false,
            "timePicker24Hour": true,
            "linkedCalendars": false,
            "autoUpdateInput": false,
            "locale": {
                format: 'YYYY-MM-DD',
                separator: ' ~ ',
                applyLabel: "应用",
                cancelLabel: "取消",
                resetLabel: "重置",
                daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
                monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            }
        }, function (start, end, label) {
            if (!this.startDate) {
                this.element.val('');
            } else {
                $('#startDate').val(this.startDate.format(this.locale.format));
                $('#endDate').val(this.endDate.format(this.locale.format));
                this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
            }
        });
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/unionpay/selectlist',
            idField: 'id',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'id', title: '编号', sortable: true, halign: 'left'},
                {field: 'mchId', title: '商户号', sortable: false, halign: 'left'},
                {field: 'outTradeNo', title: '商户订单号', sortable: false, halign: 'left'},
                {field: 'transactionId', title: '平台订单号', sortable: false, halign: 'left'},
                {field: 'tradeType', title: '交易类型', sortable: false, halign: 'left',
                    formatter:function(value,row,index){
                        if (value == "pay.weixin.micropay") { return '<div >' + '微信被扫支付' + '</div>'; }
                        else if (value == "pay.alipay.micropay") { return '<div >' + '支付宝被扫支付' + '</div>';}
                        else if (value == "pay.unionpay.micropay") { return '<div >' + '银联被扫支付' + '</div>';}
                    }
                },
                {field: 'totalFee', title: '总金额(分)', sortable: false, halign: 'left'},
                {field: 'timeEnd', title: '支付完成时间', sortable: false, halign: 'left'},
                {
                    field: 'action',
                    title: '操作',
                    halign: 'center',
                    align: 'center',
                    formatter: 'actionFormatter',
                    events: 'actionEvents',
                    clickToSelect: false
                }
            ]
        });
    });


    // 数据表格展开内容
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    function actionFormatter(value, row, index) {
        return $('#actionButtons').html();
    }

    window.actionEvents = {
        'click .like': function (e, value, row, index) {
            alert('You click like icon, row: ' + JSON.stringify(row));
            console.log(value, row, index);
        },
        'click .edit': function (e, value, row, index) {
            $('#editModal').modal('show')
            $('#editForm').fillForm(row);
            $('#editForm [name="tradeType"]').val(
                tradeType(row.tradeType)
            );
            $('#editForm [name="isSubscribe"]').val(
                isSubscribe(row.isSubscribe)
            );
            console.log(value, row, index);
        }
    };

    function tradeType(connType){
        if (connType == "pay.weixin.micropay") { return '微信被扫支付'; }
        else if (connType == "pay.alipay.micropay") { return '支付宝被扫支付';}
        else if (connType == "pay.unionpay.micropay") { return '银联被扫支付';}
    }
    function isSubscribe(isSubscribe){
        if (isSubscribe == "Y") { return '关注'; }
        else if (isSubscribe == "N") { return '未关注';}
    }
</script>
</html>